<template>
  <div class="yContainerRowCenter yMatch" style="overflow: hidden">
    <!-- 侧滑菜单 -->
    <el-menu class="el-menu-vertical-demo yMatch_h" style="border: none;overflow:auto" background-color="#545c64" text-color="#fff" :collapse="isCollapse">
      <!-- 第1层 -->
      <el-sub-menu :index="menuModel.id" v-for="(menuModel) in menuModels" :key="menuModel.id">
        <template #title>
          <el-icon>
            <grid/>
          </el-icon>
          <span>{{ menuModel.title }}</span>
        </template>
        <!-- 第2层 -->
        <div v-for="(subItem) in menuModel.subItems" :key="subItem.id">
          <div v-if="subItem.route !== ''">
            <el-menu-item :index="subItem.id" @click="click_go(subItem.route)">{{ subItem.title }}</el-menu-item>
          </div>
          <div v-else>
            <el-sub-menu :index="subItem.id">
              <template #title>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>  {{ subItem.title }}</span>
              </template>
              <!-- 第3层 -->
              <div v-for="(subSubItem) in subItem.subItems" :key="subSubItem.id">
                <div v-if="subSubItem.route !== ''">
                  <el-menu-item :index="subSubItem.id" @click="click_go(subSubItem.route)">{{ subSubItem.title }}</el-menu-item>
                </div>
                <div v-else>
                  <el-sub-menu :index="subSubItem.id">
                    <template #title>
                      <el-icon>
                        <MoreFilled/>
                      </el-icon>
                      <span>{{ subSubItem.title }}</span></template>
                    <!-- 第4层 -->
                    <div v-for="(subSubSubItem) in subSubItem.subItems" :key="subSubSubItem.id">
                      <el-menu-item :index="subSubSubItem.id" @click="click_go(subSubSubItem.route)">
                        <span>{{ subSubSubItem.title }}</span>
                      </el-menu-item>
                    </div>
                  </el-sub-menu>
                </div>
              </div>
            </el-sub-menu>
          </div>
        </div>
      </el-sub-menu>
    </el-menu>
    <div class="yContainerColumnCenter yWeight yMatch_h">
      <!-- 标题栏 -->
      <el-header class="yContainerRowCenter_v yMatch_w" style="background: white;padding: 0;height: 50px">
        <div class="yMatch_h">
          <el-button class="yContainerRowCenter" :icon="isCollapse ? 'Expand' : 'Fold'" style="height: 100%;padding:0 10px;border:none;font-size: 20px" @click="click_toggleSlide">
            <div style="font-size: 14px">{{ isCollapse ? '展开' : '收起' }}</div>
          </el-button>
        </div>
        <div style="width: 1px;height:50%;background: lightgrey;margin-left:5px;margin-right: 10px"></div>
        <!-- 导航 -->
        <el-link type="primary" icon="HomeFilled" :underline="false" @click="goHome()">首页</el-link>
        <span v-if="!isHome()" style="margin-left: 10px;margin-right: 10px;">/</span>
        <el-breadcrumb v-if="!isHome()" class="yWeight" separator-icon="ArrowRight">
          <el-breadcrumb-item class="yContainerRowCenter_v" style="overflow: hidden" v-for="(titleRoute) in titleRoutes" :key="titleRoute">{{ titleRoute }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-else class="yWeight"/>
        <!-- 个人信息 -->
        <el-dropdown @command="click_command" trigger="click">
          <div class="yContainerRowCenter" style="padding: 10px;">
            <el-icon>
              <Avatar/>
            </el-icon>
            <span style="margin-right: 10px">欢迎使用{{ yFree.webName }}，{{ userModel.nickname }}</span>
            <el-icon>
              <CaretBottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="user_home">返回首页</el-dropdown-item>
              <el-dropdown-item command="user_logout">用户注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button :icon="yFree.yIsEmpty(curPage)?'Loading':'Refresh'" type="warning" style="margin-right: 10px;color: white;font-size: 20px;padding: 5px;" circle @click="refreshCurPage"/>
      </el-header>
      <!-- 历史功能 -->
      <div v-if="menuModels_history.length > 0" class="yContainerRowCenter_v yMatch_w" style="background: white;padding: 5px;margin-top: 1px;">
        <el-link type="danger" :underline="false" @click="click_history_clear" style="margin-right: 5px;">
          <el-tag type="danger" key="deleteAll" size="large">
            <el-icon>
              <delete/>
            </el-icon>
          </el-tag>
        </el-link>
        <el-link v-for="menuModel_history in menuModels_history" :key="menuModel_history.id" :underline="false">
          <el-tag closable type="info" size="large" @click="click_go(menuModel_history.route)" @close="click_history_close(menuModel_history.id)" style="margin-right: 5px;">
            {{ menuModel_history.title }}
          </el-tag>
        </el-link>
      </div>
      <!-- 主体 -->
      <div class="yWeight yMatch div_container" style="padding: 10px;overflow: auto;background: #EEEEEE">
        <component :is="curPage"></component>
        <el-backtop target=".div_container"></el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import Pages from '../../Pages.js'

let $this, yFree, Global, IJkid, IFinal, AppUtils;

export default {
  components: Pages,
  data() {
    return {
      isCollapse: false, // 菜单状态
      curPage: '', // 主功能
      userModel: {}, // 用户数据
      menuModels: [], // 菜单列表
      menuModels_history: [], // 历史功能
      titleRoutes: [], // 导航
    }
  },
  beforeCreate() {
    $this = this, yFree = $this.yFree, Global = $this.Global, IJkid = $this.IJkid, IFinal = $this.IFinal, AppUtils = $this.AppUtils;
  },
  created() {
    $this.userModel = AppUtils.readUserModel();
    $this.menuModels_history = yFree.yReadObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`);
    if ($this.menuModels_history == null) $this.menuModels_history = [];
    $this.initMenu();
    $this.goHome();
  },
  methods: {
    initMenu() {
      $this.menuModels = $this.userModel.menuModels;
      if ($this.menuModels == null || $this.menuModels.length <= 0) {
        yFree.yShowBuilder("当前用户无任何权限，请注销", (isConfirm) => {
          if (isConfirm) yFree.yIntent(IFinal.Page.index, 0);
        }, false, "注销");
        return;
      }
      $this.menuModels.forEach((menuModel, index) => {
        menuModel.id = `${index}`;
        if (menuModel.subItems.length > 0)
          menuModel.subItems.forEach((subItem, subIndex) => {
            subItem.id = `${index}-${subIndex}`;
            if (subItem.subItems.length > 0)
              subItem.subItems.forEach((subSubItem, subSubIndex) => {
                subSubItem.id = `${index}-${subIndex}-${subSubIndex}`;
                if (subSubItem.subItems.length > 0)
                  subSubItem.subItems.forEach((subSubSubItem, subSubSubIndex) => {
                    subSubSubItem.id = `${index}-${subIndex}-${subSubIndex}-${subSubSubIndex}`;
                  });
              });
          });
      });
    },
    goHome() {
      $this.curPage = "";
      yFree.yRunOnDelay(0, () => $this.curPage = "home");
    },
    isHome() {
      return $this.curPage === "home";
    },
    click_toggleSlide() {
      $this.isCollapse = !$this.isCollapse;
    },
    click_command(command) {
      switch (command) {
        case "user_logout":
          yFree.yShowBuilder("确定注销吗？", (isConfirm) => {
            if (isConfirm) yFree.yIntent(IFinal.Page.index, 0);
          }, true, "注销");
          break;
        case "user_home":
          $this.goHome();
          break;
      }
    },
    click_go(page) {
      $this.curPage = page;
      $this.titleRoutes = [];
      let curMenuModel;
      $this.menuModels.forEach((menuModel, index) => {
        if (menuModel.subItems != null && menuModel.subItems.length > 0) {
          menuModel.subItems.forEach((subItem, subIndex) => {
            if (subItem.subItems != null && subItem.subItems.length > 0) {
              subItem.subItems.forEach((subSubItem, subSubIndex) => {
                if (subSubItem.subItems != null && subSubItem.subItems.length > 0) {
                  subSubItem.subItems.forEach((subSubSubItem, subSubSubIndex) => {
                    if (subSubSubItem.route === page) {
                      $this.titleRoutes.push(menuModel.title);
                      $this.titleRoutes.push(subItem.title);
                      $this.titleRoutes.push(subSubItem.title);
                      $this.titleRoutes.push(subSubSubItem.title);
                      curMenuModel = subSubSubItem;
                    }
                  });
                } else {
                  if (subSubItem.route === page) {
                    $this.titleRoutes.push(menuModel.title);
                    $this.titleRoutes.push(subItem.title);
                    $this.titleRoutes.push(subSubItem.title);
                    curMenuModel = subSubItem;
                  }
                }
              });
            } else {
              if (subItem.route === page) {
                $this.titleRoutes.push(menuModel.title);
                $this.titleRoutes.push(subItem.title);
                curMenuModel = subItem;
              }
            }
          });
        } else {
          if (menuModel.route === page) {
            $this.titleRoutes.push(menuModel.title);
            curMenuModel = menuModel;
          }
        }
      });
      let had = false;
      $this.menuModels_history.forEach((menuModel_history) => {
        if (menuModel_history.id === curMenuModel.id) had = true;
      });
      if (!had) $this.menuModels_history.push(curMenuModel);
      yFree.ySaveObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`, $this.menuModels_history);
    },
    click_history_close(id) {
      $this.menuModels_history.forEach((menuModel_history) => {
        if (menuModel_history.id === id) $this.menuModels_history.remove(menuModel_history);
      });
      yFree.ySaveObj(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`, $this.menuModels_history);
    },
    click_history_clear() {
      yFree.yShowBuilder("确定清空历史吗？", (isConfirm) => {
        if (isConfirm) {
          $this.menuModels_history = [];
          yFree.yDelete(`${IFinal.SaveKey.menuModels_history}_${Global.AppUtils.readUserModel().uid}`);
        }
      }, true, "清空");
    },
    refreshCurPage() {
      let page = $this.curPage;
      $this.curPage = "";
      yFree.yRunOnDelay(100, () => $this.curPage = page);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
}
</style>
